<template>
  <div>
    <PageTools>
      <template #right>
        <el-button
          type="primary"
          size="mini"
          class="btn"
          @click="addPermission({ type: 1, pid: '0'})"
        >添加权限</el-button>
      </template>
    </PageTools>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        :data="PermissionList"
        border
        style="width: 100%"
        row-key="id"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="code"
          label="标识"
          align="center"
        />
        <el-table-column
          prop="description"
          label="描述"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="scope">
            <el-button
              v-if="scope.row.pid === '0' ? true : false"
              type="text"
              @click="addPermission({type: 2, pid: scope.row.id })"
            >添加</el-button>
            <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框区域 -->
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="40%"
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item
          label="权限名称"
          prop="name"
        >
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item
          label="权限标识"
          prop="code"
        >
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item
          label="权限描述"
          prop="description"
        >
          <el-input v-model="formData.description" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionList, addPermission, getPermissionById, updatePermissionById, delPermissionById } from '@/api'
import transTree from '@/utils/transTree.js'
export default {
  data() {
    return {
      // 权限点数据列表
      PermissionList: [],
      // 控制弹窗显示与隐藏
      dialogVisible: false,
      // 表单数据
      formData: {
        enVisible: '',
        name: '',
        code: '',
        description: '',
        type: 0,
        pid: '0'
      },
      // 表单规则
      formRules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '编辑权限' : '新增权限'
    }
  },
  created() {
    this.fetchPermissionList()
  },
  methods: {
    // 获取权限点数据列表
    async fetchPermissionList() {
      const { data } = await getPermissionList()
      console.log(data)
      this.PermissionList = transTree(data)
    },
    // 点击添加
    addPermission({ type, pid }) {
      this.dialogVisible = true
      this.formData.type = type
      this.formData.pid = pid
    },
    // 点击编辑
    async edit(id) {
      this.dialogVisible = true
      const { data } = await getPermissionById(id)
      console.log(data)
      this.formData = data
    },
    // 点击删除
    del(id) {
      this.$confirm('你确定要删除该权限吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPermissionById(id)
        this.$message.success('删除权限点成功！')
        this.fetchPermissionList()
        this.closeDialog()
      }).catch(() => {})
    },
    // 提交触发
    submit() {
      this.$refs.formRef.validate(async(valid) => {
        if (!valid) return
        if (this.formData.id) {
          await updatePermissionById(this.formData)
        } else {
          const { data } = await addPermission(this.formData)
          console.log(data)
        }
        this.fetchPermissionList()
        this.$message.success(this.title + '点成功')
        this.closeDialog()
      })
    },
    // 弹框关闭事件
    closeDialog() {
      this.$refs.formRef.resetFields()
      this.dialogVisible = false
      this.formData = {
        enVisible: '',
        name: '',
        code: '',
        description: '',
        type: 0,
        pid: '0'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  float: right;
}
.table {
  padding: 15px;
}
</style>
